<template>
  <div class="about">
    <h1>{{state.count}}</h1>
    <h2>{{state.dobuleCount}}</h2>
    <button @click="increment">加一</button>
  </div>
</template>

<script>
// 通过组合API实现逻辑
// reactive方法用于定义响应性数据
import { reactive, computed, onMounted } from 'vue';
export default {
  // 必须有一个setup方法
  setup() {
    // 定义响应数据
    const state = reactive({
      count: 0,
      dobuleCount: computed(() => state.count * 2 )
    })

    // 修改count的数量
    function increment() {
      state.count++
    }

    onMounted(() => {
      console.log('onMounted')
    })

    return {
      state,
      increment
    }
  }
}
</script>